<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<div class="box-header">
				<h3 class="box-title">日志管理</h3>
				<div class="box-tools">
					<div class="input-group input-group-sm" style="width: 350px;">
						<input type="text" name="table_search" id="searchNameId"
							class="form-control pull-right" placeholder="用户名">

						<div class="input-group-btn">
							<button type="button" class="btn btn-default btn-search">
                                <i class="fa fa-search"></i>
							</button>
							<button type="button" class="btn btn-default btn-delete">删除</button>
						</div>
					</div>
				</div>
			</div>
			<!-- /.box-header -->
			<div class="box-body table-responsive no-padding">
				<table class="table table-hover">
					<thead>
						<tr>
						    <th><input type="checkbox" id="checkAll">全选</th>
							<th>用户名</th>
							<th>操作</th>
							<th>请求方法</th>
							<th>请求参数</th>
							<th>IP</th>
							<th>执行时长</th>
						</tr>
					</thead>
					<tbody id="tbodyId">
					    <tr>
					       <td colspan="7">数据正在加载中...</td>
					    </tr>
					</tbody>
				</table>
			</div>
			<div id="pageId" class="box-footer clearfix" dm="100">

			</div>
			<!-- /.box-body -->
		</div>
		<!-- /.box -->
	</div>
</div>
<script type="text/javascript">
	$(() => {
		// $("#pageId").load("doPageUI",()=>{
		// 	doGetObjects();
		// });
		$("#pageId").load("doPageUI", doGetObjects);
		$(".input-group-btn").on("click", ".btn-search", doQueryObjects)
				.on("click", ".btn-delete", doDeleteObjects);
		//thead 中全选checkbox的change事件注册及处理
		$("#checkAll").change(doChangeTbodyCheckboxState);
		// $(".cBox").change(doChangeTheadCheckboxState);
		$("#tbodyId").on("change",".cBox",doChangeTheadCheckboxState);
	});
	function doChangeTheadCheckboxState() {
		let flag = true;
		$("#tbodyId input:checkbox")
				.each(function () {
					flag = flag && $(this).prop("checked");
				});
		$("#checkAll").prop("checked",flag);
	}
	function doChangeTbodyCheckboxState() {
		let flag = $(this).prop("checked");
		$("#tbodyId input:checkbox").prop("checked",flag);
	}
	function doGetCheckedIds() {
		debugger;
		let idArray = [];
		$("#tbodyId input:checkbox:checked").each(function () {
			idArray.push($(this).val());
		})

		return idArray;
	}
	function doDeleteObjects() {
		let idArrays = doGetCheckedIds();
		if (!confirm("您确定要删除吗"))return;
		// const url = "log/doDeleteObjects";
		// let params = {"ids": idArrays.toString()};
		const url = `log/doDeleteObjects/${idArrays.toString()}`;
		$.post(url,res=>{
			if (res.state == 1) {
				alert(res.message);
				// doGetObjects();
				doRefreshAfterDeleteOk();
			}else {
				alert(res.message);
			}
		})
	}
	function doRefreshAfterDeleteOk() {
		let pageCurrent = $("#pageId").data("pageCurrent");
		let pageCount = $("#pageId").data("pageCount");
		let state = $("#checkAll").prop("checked");
		if (state && pageCurrent > 1 && pageCurrent == pageCount) {
			pageCurrent--;
			$("#pageId").data("pageCurrent",pageCurrent);
		}
		doGetObjects();
	}
	function doQueryObjects() {
		$("#pageId").data("pageCurrent",1);
		doGetObjects();
	}

	function doGetObjects(){
		$("#checkAll").prop("checked",false);
		//debugger;//断点调试
		//1.定义url和参数
		const url="log/doFindPageObjects"
		let pageCurrent = $("#pageId").data("pageCurrent");
		let username = $("#searchNameId").val();
		let params={"pageCurrent": pageCurrent ? pageCurrent : 1,
			"username": username};
		//2.发起异步请求
		//请问如下ajax请求的回调函数参数名可以是任意吗？//可以,必须符合标识符的规范
		$.getJSON(url,params,function(result){
					//请问result是一个字符串还是json格式的js对象？对象
					doHandleQueryResponseResult(result);
				}
		);//特殊的ajax函数
	}
	function doHandleQueryResponseResult (result){ //JsonResult
		console.log("server.jsonresult",result);
		if(result.state==1){//ok
			//更新table中tbody内部的数据
			doSetTableBodyRows(result.data.records);//将数据呈现在页面上
			//更新页面page.html分页数据
			doSetPageInation(result.data);
			//doSetPagination(result.data); //此方法写到page.html中
		}else{
			// alert(result.message);
			doSetTableBodyErrors(result.message);
			let page = {rowCount:0,pageCurrent: 1, pageCount: 0};
			doSetPageInation(page);
		}
	}
	function doSetTableBodyErrors(msg) {
		$("#tbodyId").html(`<tr><td colspan="7">${msg}</td></tr>`)
	}
	function doSetTableBodyRows(records){
		//1.获取tbody对象，并清空对象
		let tBody=$("#tbodyId");
		tBody.empty();
		//2.迭代records记录，并将其内容追加到tbody
		records.forEach(item=>{
			tBody.append(doCreateRow(item));
		})
	}
	function doCreateRow(item){
		return `<tr>
					<td><input type="checkbox" class="cBox" value="${item.id}">${item.id}</td>
					<td>${item.username}</td>
					<td>${item.operation}</td>
					<td>${item.method}</td>
					<td>${item.params}</td>
					<td>${item.ip}</td>
					<td>${item.time}</td>
				</tr>`;
	}
</script>






